<template>
    <el-tabs type="card" v-if="tabs.length>0 && tabs"
             v-model="$route.path"
             @tab-click="tabClick"
             @tab-remove="tabRemove"
             closable class="content">
        <el-tab-pane v-for="item in tabs"
                     :label="item.title"
                     :name="item.path">
        </el-tab-pane>
    </el-tabs>

</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import appStore from "@/store/appStore.ts";
import {storeToRefs} from "pinia";


const {tabs} = storeToRefs(appStore())

const router = useRouter()

const tabClick=(val:any)=>{
    console.log(val.props.name)
    router.push({
        path:val.props.name
    })
}

const tabRemove=(val:any)=>{
    tabs.value.forEach((item,index)=>{
        if(item.path==val){
            tabs.value.splice(index,1)
        }
    })
}
</script>

<style scoped>
.content {
    margin-top: 5px;
    height: 35px;
    user-select: none;
}

:deep(.el-tabs__nav-wrap) {
    height: 35px !important;
    line-height: 35px !important;
}

:deep(.el-tabs__nav-next), :deep(.el-tabs__nav-prev) {
    line-height: 35px !important;
}

:deep(.el-tabs__header) {
    height: 35px !important;
    margin: 0;
    border: none;
}

:deep(.el-tabs__item) {
    height: 30px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid grey !important;
    line-height: 30px;
    padding: 0 10px 0 10px !important;
    border-radius: 2px;
}

:deep(.el-tabs__item:not(:last-child)) {
    margin-right: 10px;
}

:deep(.is-active) {
    border-bottom: inherit;
    background-color: lightcyan;
}

:deep(.el-tabs__nav) {
    border: none !important;
    /*height: 35px;*/
    /*1px solid #E4E7ED*/
}

</style>

